<template>
	<div>
		<client-only>
			<!-- <swiper></swiper> -->
			<swiper ref="swiper" class="swiper" :options="swiperOption" :style="swiperStyle">
				<swiper-slide
					v-for="(item, index) in data"
					:key="index"
					:style="slideStyle"
				>
					<slot v-bind:scope="item"></slot>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
				<div
					class="swiper-button-prev"
					slot="button-prev"
					v-show="swiperButtonShow"
					:style="swiperButtonPrev"
				></div>
				<div
					class="swiper-button-next"
					slot="button-next"
					v-show="swiperButtonShow"
					:style="swiperButtonNext"
				></div>
			</swiper>
		</client-only>
	</div>
</template>

<script>

export default {
	name: 'LtSwiper',
	props: {
		swiperStyle: {
			type: [String, Object],
			default: "height: 300px;width: 100%;padding: 0 50px;",
		},
		data: {
			type: Array,
			default: () => {
				return [];
			},
		},
		swiperOption: {
			type: Object,
			default: () => {
				return {
					slidesPerView: 3,
					spaceBetween: 30,
					slidesPerGroup: 3,
					loop: true,
					loopFillGroupWithBlank: true,
					pagination: {
						el: ".swiper-pagination",
						clickable: true,
					},
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					},
				};
			},
		},
		// 是否展示左右按钮
		swiperButtonShow: {
			type: Boolean,
			default: true,
		},
		slideStyle: {
			type: [Object, String],
			default: "background:transparent;width: initial;",
		},
		swiperButtonPrev: {
			type: [Object, String],
			default: "",
		},
		swiperButtonNext: {
			type: [Object, String],
			default: "",
		},
	},
	computed: {
		swiper() {
			return this.$refs.swiper&&this.$refs.swiper.$swiper;
		},
	},
	data() {
		return {};
	},
	methods: {
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	width: 100%;

	.swiper-slide {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-weight: bold;
		font-size: 12 * 2;
		background-color: white;
	}

	.swiper-button-prev {
		left: 0px;
		color: #151515;
		background: #d8d8d8;
		width: 48px;
		height: 94px;
		font-weight: bold;
		opacity: 0.43;
	}
	.swiper-button-next {
		color: #151515;
		background: #d8d8d8;
		width: 48px;
		height: 94px;
		font-weight: bold;
		opacity: 0.43;
	}

	::v-deep .swiper-button-prev:after,
	.swiper-container-rtl .swiper-button-next:after {
		font-size: 26px;
	}
	::v-deep .swiper-button-next:after,
	.swiper-container-rtl .swiper-button-prev:after {
		font-size: 26px;
	}
}
</style>
